<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title th:text="${userName}+' 打卡'"></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>
    <script type="text/javascript" th:src="@{/js/myAlter.js}" ></script>
    <style>
        .attend-table {
            width: 90%;
            border-collapse: collapse;
            margin-top: 20px;
            margin-left: 5%;
        }

        .table-header {
            background-color: #4CAF50;
            color: white;
        }

        .table-row:nth-child(even) {
            background-color: #f2f2f2;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
            height: 50px;
            font-size: 20px;
        }

        .myPagination {
            width: 100%;
            position: relative;
            bottom: 0;
            gap: 30px;
        }

        .prev-button,
        .next-button {
            width: 85px;
            height: 40px;
            border-radius: 10px;
            background-color: skyblue;
            color: white;
            border: none;
            cursor: pointer;
        }

        .prev-button:hover,
        .next-button:hover {
            background-color: skyblue;
        }

        .month-selector {
            border: none;
            cursor: pointer;
            font-size: 20px;
        }
        .addInput{
            border: none;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
<!-- 编辑模态框（Modal） -->
<div class="modal fade" id="editClockModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 8%">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel2">
                    编辑信息
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label col-form-label-sm">日期：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control form-control-sm" id="editDateTime" >
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label col-form-label-sm">上班：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control form-control-sm" id="editUptime" >
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-2 col-form-label col-form-label-sm">下班：</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control form-control-sm" id="editDowntime" >
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-success" onclick="updateClock()">
                    修改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div th:fragment="attendance">
    <div>
        <form th:action="@{/attend/toClockEdit}" method="get" id="clockList">
            <br>
            <div id="alterDiv"></div>
            <p style="display: flex; justify-content: space-between; margin-left: 20px; margin-right: 20px;font-size: 20px">
                <span>
                    <label>
                        <select name="month" onchange="submitMonth()" class="month-selector">
                            <option value=1 th:selected="${monthValue==1}">1 月</option>
                            <option value=2 th:selected="${monthValue==2}">2 月</option>
                            <option value=3 th:selected="${monthValue==3}">3 月</option>
                            <option value=4 th:selected="${monthValue==4}">4 月</option>
                            <option value=5 th:selected="${monthValue==5}">5 月</option>
                            <option value=6 th:selected="${monthValue==6}">6 月</option>
                            <option value=7 th:selected="${monthValue==7}">7 月</option>
                            <option value=8 th:selected="${monthValue==8}">8 月</option>
                            <option value=9 th:selected="${monthValue==9}">9 月</option>
                            <option value=10 th:selected="${monthValue==10}">10 月</option>
                            <option value=11 th:selected="${monthValue==11}">11 月</option>
                            <option value=12 th:selected="${monthValue==12}">12 月</option>
                        </select>
                    </label>
                </span>
                <span>本周：<span th:text="${data.weekTimeData}"></span></span>
                <span>本月：<span th:text="${data.monthTimeDate}"></span></span>
                <span>出勤：<span th:text="${data.attendDays}"></span>天</span>
                <span>加班：<span th:text="${data.latterDays}"></span>天</span>
                <span>月均剩余：<span th:text="${data.restAverageTime}"></span></span>
            </p>
            <table class="attend-table">
                <tr class="table-header">
                    <th class="checkbox-cell"><input type="checkbox" id="th_head"/></th>
                    <!--                <th>ID</th>-->
                    <!--                <th>name</th>-->
                    <th>date</th>
                    <th>upTime</th>
                    <th>downTime</th>
                    <th>additionLength</th>
                    <th>操作</th>
                </tr>
                <tbody id="tb_body">
                    <tr th:each="item : ${data.attendList.records}" class="table-row">
                        <td class="checkbox-cell"><input type="checkbox" th:value="${item.id}"></td>
                        <!--                <td th:text="${item.id}"></td>-->
                        <!--                <td th:text="${item.name}"></td>-->
                        <td th:text="${item.currentDateTime}"></td>
                        <td th:text="${item.clockUpTime}"></td>
                        <td th:text="${item.clockDownTime}"></td>
                        <td th:text="${item.additionTimeStr}"></td>
                        <td>
                            <button type="button" class="btn btn-info" data-target="#editClockModal" data-toggle="modal"  th:onclick="editShowClock([[${item.id}]],[[${item.currentDateTime}]],[[${item.clockUpTime}]],[[${item.clockDownTime}]])">编辑</button>
                        </td>
                    </tr>
                </tbody>
                    <tr  class="table-row">
                        <td class="checkbox-cell"><button type="button" class="btn badge-danger" style="font-size: 10px;padding: 1px" onclick="deleteClock()">批删</button></td>
                        <td><input type="date" class="addInput" id="addDateTime"></td>
                        <td><input type="time" class="addInput" id="addUptime"></td>
                        <td><input type="time" class="addInput" id="addDowntime"></td>
                        <td>—</td>
                        <td>
                            <button type="button" class="btn btn-success" onclick="addClock()">添加</button>
                        </td>
                    </tr>
            </table>
            <div style="text-align: center;margin-top: 10px">
                <input th:value="${userName}" name="userName" style="display: none">
                <div class="btn-group">
                    <button class="btn btn-info" th:if="${data.attendList.current>1}" type="submit" name="page" th:value="${data.attendList.current -1}">上一页</button>
                    <button type="button" class="btn btn-default"><span th:text="${data.attendList.current}"></span> | <span th:text="${data.attendList.total/data.attendList.size +1}"></span></button>
                    <button class="btn btn-info" th:if="${data.attendList.current<= data.attendList.total/data.attendList.size}" type="submit" name="page" th:value="${data.attendList.current +1}">下一页</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    var ckall = document.getElementById("th_head");
    var cks = document.getElementById("tb_body").getElementsByTagName("input");
    var editClockId;
    ckall.onclick = function(){
        // console.log(this.checked)
        for(var i=0;i<cks.length;i++){
            cks[i].checked=this.checked
        }
    }
    for(var i=0;i<cks.length;i++){
        cks[i].onclick = function(){
            var flag = true
            for(var j=0;j<cks.length;j++){
                if(!cks[j].checked){
                    flag = false
                    break
                }
            }
            ckall.checked = flag
        }
    }
    function submitMonth() {
        document.getElementById('clockList').submit();
    }
    function editShowClock(id,datetime,uptime,downtime){
        document.getElementById("editDateTime").value = datetime;
        document.getElementById("editUptime").value = uptime;
        document.getElementById("editDowntime").value = downtime;
        editClockId = id;
    }
    function updateClock(){
        var datetime = document.getElementById('editDateTime').value;
        $.ajax({
            url:'/attend/updateClock',
            type:'post',
            async: true,
            data:{
                'id':editClockId,
                'currentDateTime': datetime,
                'clockUpTime':datetime+" "+document.getElementById('editUptime').value,
                'clockDownTime':datetime+" "+document.getElementById('editDowntime').value
            },
            dataType: 'json',
            success:function (data) {
                if(data===1){
                    openAlterDiv(success,'编辑成功',true);
                }else {
                    openAlterDiv(error,'编辑失败',true);
                }
            }
        });
    }
    function addClock(){
        var datetime = document.getElementById('addDateTime').value;
        let upTime = document.getElementById('addUptime').value;
        let endTime = document.getElementById('addDowntime').value;
        let item = localStorage.getItem('userData');
        item = JSON.parse(item);
        const userName = item.userName;
        if(upTime===null || upTime===""){
            upTime = null;
        }else {
            upTime = datetime+" "+upTime+":00";
        }
        if(endTime===null || endTime===""){
            endTime = null;
        }else {
            endTime = datetime+" "+endTime+":00";
        }
        $.ajax({
            url:'/attend/updateClock',
            type:'post',
            async: true,
            data:{
                'currentDateTime': datetime,
                'clockUpTime': upTime,
                'clockDownTime': endTime,
                'name':userName
            },
            dataType: 'json',
            success:function (data) {
                if(data===1){
                    openAlterDiv(success,'新增成功！',true);
                }else if(data ===2) {
                    openAlterDiv(false,"打卡日期不能为空 或 已存在",true);
                }else {
                    openAlterDiv(error,"操作失败！",true);
                }
            }
        });
    }
    function deleteClock(){
        var sIds=[];
        for(var m=0;m<cks.length;m++){
            if(cks[m].checked){
                sIds[m]=cks[m].value;
            }
        }
        $.ajax({
            url: '/attend/deleteClock',
            type: 'post',
            async: true,
            data: {"ids":sIds},
            dataType: 'json',
            traditional:true,
            success: function (data) {
                if(data===1){
                    openAlterDiv(success,'删除成功！',true);
                }else {
                    openAlterDiv(error,'删除失败',true)
                }
            }
        });
    }

</script>

</body>

</html>